<template>
  <div id="Vchart">
    <el-card class="box-card title-card">
      <div class="box-bg"></div>
      <div class="box-container">
        <div slot="header" class="clearfix">
          <span>朝阳区咖啡店基本信息一览</span>
        </div>
        <div style="margin-top:10px;">
          <el-row>
            <el-col :span="12" align="center">
              <i-circle
                dashboard
                :size="120"
                :trail-width="5"
                :stroke-width="6"
                :percent="39"
                stroke-color="#1abc9c"
              >
                <div class="demo-Circle-custom">
                  <h1>1,685</h1>
                  <p>咖啡店数量</p>
                  <span>
                    约占全市
                    <i>39%</i>
                  </span>
                </div>
              </i-circle>
            </el-col>
            <el-col :span="12" align="center">
              <i-circle
                dashboard
                :size="120"
                :trail-width="5"
                :stroke-width="6"
                :percent="40"
                stroke-color="#1abc9c"
              >
                <div class="demo-Circle-custom">
                  <h1>629</h1>
                  <p>全市前20品牌数量</p>
                  <span>
                    约占全市
                    <i>40%</i>
                  </span>
                </div>
              </i-circle>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>

    <el-card class="box-card">
      <div class="box-bg"></div>
      <div class="box-container">
      <div slot="header" class="clearfix">
        <span>咖啡店增速排名(2017——2018)</span>
      </div>
      <div class="chart">
        <ve-histogram
          :data="increasetData"
          :legend-visible="false"
          :extend="chartExtend"
          height="140px"
          :data-zoom="dataZoom"
          :grid="grid"
        ></ve-histogram>
      </div>
      </div>
    </el-card>

    <el-card class="box-card">
      <div class="box-bg"></div>
      <div class="box-container">
      <div slot="header" class="clearfix">
        <span>朝阳区<span v-if="curStreetName!=''"> VS {{this.curStreetName}} </span>咖啡店服务指数</span>
      </div>
      <div class="chart">
        <el-row>
          <el-col :span="12">
            <ve-radar
              :data="indexData"
              :legend-visible="false"
              height="120px"
              :extend="radarExtend"
              :grid="initGrid"
            ></ve-radar>
          </el-col>
          <el-col :span="12">
            <ve-radar
              :data="indexData2"
              :legend-visible="false"
              height="120px"
              :extend="radarExtend"
              :grid="initGrid"
            ></ve-radar>
          </el-col>
        </el-row>
      </div>
      </div>
    </el-card>

    <el-card class="box-card">
      <div class="box-bg"></div>
      <div class="box-container">
      <div slot="header" class="clearfix">
        <span>咖啡店网络评价</span>
      </div>
      <div class="chart">
        <ve-wordcloud
          :data="wordCloudData"
          :settings="chartSettings"
          :legend-visible="false"
          height="120px"
          :grid="initGrid"
        ></ve-wordcloud>
      </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { Icircle } from "iview";
export default {
  data: function() {
    // x轴字倾斜
    this.chartExtend = {
      xAxis: {
        axisLabel: {
          interval: 0,
          rotate: 40,
          textStyle: {
            color: "#fff"
          }
        },
        axisLine:{
          show: true,
          lineStyle:{
            color:'rgb(0,251,255)',
            width: 2
          }
        }
      },
      yAxis: {
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff"
          }
        },
        splitLine: false
      },
      grid:{
        borderWidth:0,
        top:0,
      }
    };
    // 雷达图配置
    this.radarExtend = {
      radar: {
        name: {
            textStyle: {
                color: '#ffffff'
            }
        },
        splitLine: {
            lineStyle: {
                color: [
                    'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
                    'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
                    'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
                ].reverse()
            }
        },
        splitArea: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(238, 197, 102, 0.5)'
            }
        },
        radius: 35
      },
      series:{
        itemStyle: {
            normal: {
                color: '#B3E4A1'
            }
        },
        areaStyle: {
            normal: {
                opacity: 0.1
            }
        },
        lineStyle:{
          normal: {
              width: 1,
              opacity: 0.7
          }
        }
      },
      grid:{
        borderWidth:0
      }
    };
    // 滚动条
    this.dataZoom = [
      {
        type: "slider",
        start: 0,
        end: 30,
        filterMode: "empty",
        showDetail: false,
        bottom: 40
      }
    ];
    // 定制
    this.grid = {
      show: true,
      top: 20,
      bottom: 25
    };
    // 初始grid
    this.initGrid = {
      show: false,
      top: 0,
      bottom: 0,
      left: 0,
      right: 0
    };
    // 词云配置
    this.chartSettings = {
      shape: "triangle",
      color: [
        "#1abc9c",
        "#16a08500f",
        "#2ecc71",
        "#27ae60",
        "#3498db",
        "#2980b9",
        "#9b59b6",
        "#8e44ad",
        "#f1c40f",
        "#f39c12",
        "#e67e22",
        "#d35400",
        "#e74c3c",
        "#c0392b"
      ]
    };
    return {};
  },
  computed: {
    increasetData() {
      return this.$store.getters.curIncreasetData;
    },
    wordCloudData() {
      return this.$store.getters.curWordCloudData;
    },
    indexData() {
      return this.$store.getters.curIndexData;
    },
    indexData2() {
      return this.$store.getters.curIndexData2;
    },
    curStreetName(){
      return this.$store.getters.curStreetName
    },
    curIncreaseIndex(){
      return this.$store.getters.curIncreaseIndex
    }
  },
  watch:{
    increasetData:{
      handler(val){
        var dataLength = val.rows.length;
        var start = this.dataZoom[0].start;
        var end = this.dataZoom[0].end;
        var curId = this.curIncreaseIndex

        this.dataZoom[0] = {
          start: curId / dataLength * 100 - (end - start)/2,
          end: curId / dataLength * 100 + (end - start)/2,
          bottom: 40
        };
      },
      deep:true
    }
  },
  components: {
    Icircle
  }
};
</script>

<style lang="stylus" scoped>
#Vchart {
  position: absolute;
  box-sizing border-box;
  height: 100%;
  width: 500px;
  z-index: 9;
  top: 0px;
  right: 16px;
  // display flex
  // flex-direction: column

  &>div {
    margin-top:14px;
    // flex 1
    height 23%
  }

  .title-card {
    // height: 180px;
  }

  .box-card {
    .chart {
      // height: 200px;
    }
  }
}

.box-container {
  position: absolute;
  width: 100%;
  height: 100%;

  &>div:nth-child(1) {
    color: #fff;
    height: 40px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    background: url('../../assets/title_bg.png') no-repeat center bottom;
  }
}

.box-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('../../assets/panel_bg2.png') repeat-y;
  background-size: 100%;
}

.demo-Circle-custom {
  color: #fff;

  h1 {
    font-weight: bold;
  }

  p {
    line-height: 20px;
  }
}
</style>
